.bewly-design.articlesPage {
  body {
    background-color: unset;
  }

  .right-side-bar .catalog {
    line-height: 3em;
  }

  // #region theme color adaption part
  // Increase the priority of the style inside by writing a non-existent selector in :not()
  :not(fdjslfds) {
    .page-content .right-side .rank-module .rank-list .item a:hover,
    .page-content
      .left-side
      .article-list
      .article-list-holder
      .article-item:hover
      .item-holder
      .article-title,
    .page-content .right-side .rank-module .rank-tabs-bar .rank-tabs-list li.on,
    .page-content .right-side .up-list .up-item .info-holder .head .follow,
    .page-content
      .right-side
      .up-list
      .up-item
      .info-holder
      .head
      .nick-name:hover,
    .page-content
      .right-side
      .up-list
      .up-item
      .info-holder
      .dynamic
      .arc-title:hover,
    .categories-bar .tag-item.on,
    .nav-tab-bar .tab-item.on,
    .nav-tab-bar .tab-item.on a,
    .page-content
      .left-side
      .partitio-name
      .filter
      .filter-btn-lst
      .filter-btn:hover,
    .page-content .right-side .rank-module .complete-rank:hover,
    .article-detail .topic-info,
    .right-side-bar .side-toolbar .toolbar-item:hover .iconfont,
    .right-side-bar .side-toolbar .toolbar-item:hover > .toolbar-item__num,
    .right-side-bar .catalog:hover .catalog-text,
    .right-side-bar .catalog:hover .icon-catalog,
    .right-side-bar .catalog-panel .catalog-item:hover,
    .right-side-bar .catalog-panel .catalog-item--on .icon-bilibili-tv,
    .nav-tab-bar .tab-item:hover,
    .video-link__to,
    .interaction-info .hover-item:hover,
    .interaction-info .hover-item:hover i,
    .normal-article-holder a,
    .read-article-holder .card-text-label {
      color: var(--bew-theme-color);
    }

    .right-side-bar .catalog-panel .catalog-item--on {
      color: var(--bew-theme-color) !important;
    }

    .page-content
      .right-side
      .rank-module
      .rank-list
      .item:nth-child(-n + 3)
      .rank-index,
    .article-detail .unfollow,
    .modal-box-holder .modal-box .modal-footer .modal-btn-primary,
    .bili-dialog-bomb .appeal-box .submit .confirm {
      background-color: var(--bew-theme-color);
    }

    .page-content .right-side .rank-module .rank-tabs-bar .rank-tabs-list li.on,
    .page-content .right-side .up-list .up-item .info-holder .head .follow,
    .categories-bar .tag-item.on,
    .modal-box-holder .modal-box .modal-footer .modal-btn-primary,
    .read-article-holder .card-text-label {
      border-color: var(--bew-theme-color);
    }

    .nav-tab-bar .logo,
    .article-detail .topic-info:before {
      filter: var(--bew-filter-icon-glow);
    }

    .nav-tab-bar .tab-item.on {
      // width: 28px;
      height: 28px;
      overflow: hidden;

      &::before {
        transform: translateY(-28px);
        filter: drop-shadow(0 28px 0 var(--bew-theme-color));
      }
    }

    .page-content .left-side .article-list .tips-holder {
      position: relative;
      overflow: hidden;
    }

    .page-content .left-side .article-list .tips-holder .no-more {
      transform: translateX(-680px);
      filter: drop-shadow(680px 0 0 var(--bew-theme-color));
    }
  }
  // #endregion

  // #region dark mode adaption part
  &.dark {
    .nav-tab-bar .tab-item,
    .page-content .left-side .partitio-name,
    .page-content .right-side .rank-module .rank-tabs-bar label,
    .page-content
      .left-side
      .article-list
      .article-list-holder
      .article-item
      .item-holder
      .article-title-holder,
    .page-content .right-side .rank-module .rank-list .item a,
    .page-content .right-side .up-list .title,
    .page-content .right-side .up-list .up-item .info-holder .head .nick-name,
    .page-content .right-side .more .top-bar,
    .page-content .right-side .more .help .title,
    .page-content .right-side .more .link .title,
    .article-container .title-container .title,
    .normal-article-holder,
    .article-up-info .up-name,
    .right-side-bar .catalog-panel__title,
    .right-side-bar .catalog-panel .catalog-item,
    .fixed-top-header .inner > p,
    .fixed-top-header .inner .up-info,
    .page-content
      .right-side
      .search-module
      .search-block
      .search-word-panel
      .history-item
      a,
    .categories-bar .tag-item,
    .page-content .right-side .rank-module .complete-rank,
    .article-detail .bangumi-rate-panel .info .title,
    .page-content .right-side .up-list .fresh-btn,
    .ql-container,
    .view-note .note-content .ql-container .ql-editor,
    .bili-dialog-bomb .appeal-box .wrap .container .question,
    .van-popover.van-followed,
    .van-popover.van-followed .follow_dropdown li:hover {
      color: var(--bew-text-1);
    }

    span[style*='color:#000000'] {
      color: var(--bew-text-1) !important;
    }

    .page-content
      .left-side
      .article-list
      .article-list-holder
      .article-item
      .item-holder
      .article-desc,
    .page-content .right-side .up-list .up-item .info-holder .dynamic,
    .page-content .right-side .more .help .info,
    .page-content .right-side .more .link .info,
    .article-read-info .publish-text,
    .article-up-info .avatar-info-pannel,
    .article-read-info *,
    .right-side-bar .catalog,
    .right-side-bar .side-toolbar .toolbar-item .iconfont,
    .right-side-bar .side-toolbar .toolbar-item,
    .right-side-bar .to-top .iconfont,
    .right-side-bar .catalog-panel__info,
    .page-content .right-side .search-module .search-block .search-word-panel,
    .article-breadcrumb .breadcrumb-title,
    .article-breadcrumb .breadcrumb-name,
    .article-breadcrumb .slash,
    .article-detail .bangumi-rate-panel .info .desc,
    .modal-box-holder .modal-box .modal-footer .modal-btn-default,
    .bili-dialog-bomb .appeal-box .submit .cancel {
      color: var(--bew-text-2);
    }

    .normal-article-holder blockquote * {
      color: var(--bew-text-2) !important;
    }

    .page-content
      .left-side
      .article-list
      .article-list-holder
      .article-item
      .item-holder
      .article-info-bar
      *,
    .page-content
      .right-side
      .up-list
      .up-item
      .info-holder
      .dynamic
      .arc-title,
    .page-content
      .left-side
      .article-list
      .article-list-holder
      .article-item
      .item-holder
      .article-title-holder
      .list-mark,
    .interaction-info .toolbar .share-box,
    .interaction-info,
    .followed {
      color: var(--bew-text-3);
    }

    .page-content .left-side .article-list .article-list-holder .article-item,
    .page-content .right-side .rank-module .rank-list .item,
    .page-content .right-side .up-list,
    .article-up-info,
    .page-content
      .right-side
      .up-list
      .up-item
      .info-holder
      .head
      .follow.followed,
    .modal-box-holder .modal-box .modal-footer .modal-btn-default,
    .ql-container,
    .view-note .note-content .ql-container .ql-editor,
    .bili-dialog-bomb .appeal-box .header,
    .bili-dialog-bomb .appeal-box .submit,
    .bili-dialog-bomb .appeal-box .submit .cancel,
    .bili-button.primary.plain {
      background-color: transparent;
    }

    .article-container,
    .page-content .right-side .rank-module .complete-rank,
    .comment-wrapper .comment-m {
      background-color: var(--bew-content-solid-1);
    }

    .comment-wrapper .comment-m {
      --bew-bg: var(--bew-content-solid-1);
    }

    .right-side-bar .to-top,
    .right-side-bar .side-toolbar,
    .right-side-bar .catalog,
    .right-side-bar .catalog:after,
    .right-side-bar .catalog-panel,
    .page-content .right-side .search-module .search-block .search-word-panel,
    .page-content
      .right-side
      .search-module
      .search-block
      .search-word-panel
      .panel-title
      p
      span,
    .page-content .left-side .partitio-name .filter .filter-btn-lst,
    .to-top,
    .bili-dialog-bomb .appeal-box {
      background-color: var(--bew-elevated-solid-1);
    }

    .fixed-top-header,
    .modal-box-holder .modal-box {
      background-color: var(--bew-elevated-solid-2);
    }

    .page-content .right-side .rank-module .rank-list .item .rank-index,
    .article-read-info .spoiler,
    .page-content .right-side .up-list .fresh-btn {
      background-color: var(--bew-fill-1);
    }

    .right-side-bar .catalog-panel .catalog-item:hover,
    .page-content
      .right-side
      .search-module
      .search-block
      .search-word-panel
      .history-item:hover,
    .page-content
      .right-side
      .search-module
      .search-block
      .search-word-panel
      .suggest-item:hover,
    .followed,
    .van-popover.van-followed .follow_dropdown li:hover {
      background-color: var(--bew-fill-2);
    }

    .page-content .left-side .article-list .article-list-holder .article-item,
    .page-content .right-side .up-list .title,
    .page-content .right-side .rank-module .rank-tabs-bar,
    .page-content .right-side .more .top-bar,
    .article-container__content,
    .page-content
      .left-side
      .article-list
      .article-list-holder
      .article-item
      .item-holder
      .article-title-holder
      .list-mark,
    .page-content .right-side .search-module .search-block,
    .page-content .right-side .search-module .search-block .search-word-panel,
    .categories-bar,
    .modal-box-holder .modal-box .modal-head .modal-title,
    .modal-box-holder .modal-box .modal-footer .modal-btn-default,
    .modal-box-holder .modal-box .modal-footer .modal-btn-primary,
    .page-content .right-side .up-list .fresh-btn,
    .page-content
      .right-side
      .search-module
      .search-block
      .search-word-panel
      .panel-title
      .split-line,
    .bili-dialog-bomb .appeal-box .header,
    .bili-dialog-bomb
      .appeal-box
      .wrap
      .container
      .textarea
      .textarea-wrap
      textarea,
    .bili-dialog-bomb .appeal-box .submit .cancel,
    .bili-dialog-bomb .appeal-box .submit,
    .van-popover.van-followed,
    .followed,
    .read-article-holder .row-video-holder {
      border-color: var(--bew-border-color);
    }

    .to-top {
      border-color: var(--bew-elevated-solid-1);
    }

    .nav-tab-bar .tab-item:before {
      filter: invert(1) hue-rotate(180deg);
    }

    .page-content .right-side .up-list .fresh-btn:before {
      filter: brightness(2) contrast(0);
    }
  }
  // #endregion
}
